<template>
  <div class="app-container">
    <PageSearch
      :showSearch.sync="showSearch"
      :getList="getList"
      :handleQuery="handleQuery"
      :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-row>
            <!-- 租户名称 -->
            <el-form-item prop="distrName">
              <el-input :placeholder="$t('租户名称')" v-model="queryParams.distrName" />
            </el-form-item>
            <!-- 变动记录类型 -->
            <el-form-item prop="type">
              <el-select :placeholder="$t('变动记录类型')" v-model="queryParams.type">
                <el-option
                  v-for="item in points_records_type_list"
                  :key="item.dictValue"
                  :value="item.dictValue"
                  :label="item.dictLabel" />
              </el-select>
            </el-form-item>
            <!-- 出/入 -->
            <el-form-item prop="inOut">
              <el-select :placeholder="$t('出/入')" v-model="queryParams.inOut">
                <el-option :value="'0'" label="出" />
                <el-option :value="'1'" label="入" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions> </template>
    </PageSearch>

    <el-table :height="calTableHeight()" v-loading="loading" ref="TableRef" :data="tableData">
      <!-- 租户名称 -->
      <el-table-column label="租户名称" align="center" prop="distrName" />
      <!-- 变动记录类型  -->
      <el-table-column label="变动记录类型" align="center" prop="type">
        <!-- inOut 出/入 0-出 1-入 -->
        <template slot-scope="{ row }">
          {{ handleType(row.type) }}
        </template>
      </el-table-column>
      <el-table-column label="变动前持有积分" align="center" prop="alterationBefore" />

      <el-table-column label="积分变动情况" align="center" prop="alteration" />

      <el-table-column label="变动后持有积分" align="center" prop="alterationLater" />

      <!-- 出/入 -->
      <el-table-column label="出/入" align="center" prop="distrName">
        <!--inOut 入1 出2 -->
        <template slot-scope="{ row }">
          <span v-if="row.inOut == 2" style="color: red">
            <!-- 出 -->
            出
          </span>
          <span v-if="row.inOut == 1" style="color: green">
            <!-- 入 -->
            入
          </span>
        </template>
      </el-table-column>

      <!-- 变动时间 -->
      <el-table-column label="变动时间" align="center" prop="createTime" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { distributorPointsList } from '@/api/bill/integralChangeRecord'
import { useDict } from '@/utils/useDict'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'IntegralChangeRecord',
  data() {
    return {
      points_records_type_list: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 汇率（每天更新）表格数据
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  async created() {
    this.getList()
    useDict('points_records_type').then(({ points_records_type }) => {
      this.points_records_type_list = points_records_type
    })
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    /** 查询汇率（每天更新）列表 */
    getList() {
      this.loading = true
      distributorPointsList(this.queryParams).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /**变动记录类型 */
    handleType(type) {
      return this.points_records_type_list?.filter((i) => {
        return i.dictValue == type
      })[0]?.dictLabel
    },
    // 取消按钮
    cancel() {},
  },
}
</script>
